<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dds</title>
  <!-- 最好在頭部，因为程序自顶向下逐步执行 -->
  <script src="/vue/lib/vue.js"></script>

</head>

<body>
  <!-- 事件  事件源（dom）  事件发生特定的动作   click监听  js函数方法 
在vue中 -->
  <!-- 事件修饰符作用就是和事件连用用来确定事件触发的机制
常用的事件修饰符
.stop：停止冒泡 
pervent：阻止
self：自己
。once：一次-->
  <div id="box">
    <h1>stop：停止冒泡</h1>
    <div style="width: 200px;height: 200px; background-color: red;" @click="parent">
      <div style="width: 100px;height: 100px; background-color: rgb(137, 121, 121);" @click.stop="child">
        <!-- 如果不加stop的话点击的时候也会打印父元素 -->
        <div style="width:50px;height:50px; background-color: rgb(166, 216, 48);" @click="child1">
        </div>
      </div>

    </div>
    <!-- prevent用来阻止标签的默认行为 -->
    <h1>pervent：阻止修饰符.</h1>
    <a href="https://www.seeseed.com/" @click.prevent="tiaozhuan">跳转</a>

    <h1>self:修饰符.</h1>
    <!-- 只会触发自己标签上的事件 和stop差不多，只触发自己标签的事件-->
    <div style="width: 200px;height: 200px; background-color: red;" @click.self="parent">
      <div style="width: 100px;height: 100px; background-color: rgb(137, 121, 121);" @click.stop="child">
        <!-- 如果不加stop的话点击的时候也会打印父元素 -->
        <div style="width:50px;height:50px; background-color: rgb(166, 216, 48);" @click="child1">
        </div>
      </div>
    </div>
    <h1>once:修饰符.</h1>
    <!-- 只触发一次，点第二次时就 -->
    <a href="https://www.seeseed.com/" @click.prevent.once="tiaozhuan">跳转</a>


  </div>
  <script>
    var vue = new Vue({
      el: '#box',
      data: {
        na: 'asd',
        mag: 123
      },
      methods: {
        parent: function () {
          console.log('parent');
        },
        child() {
          console.log('child');
        },
        child1() {
          console.log('child1');
        },
        tiaozhuan() {
          alert(1)
        }
      }
    })
  </script>


</body>

</html>